import './Cate.css'
import React from 'react';
import TopBar from '../TopBar/TopBar';

export default function Cate(props) {
    return (
        <div className={'catebox ' + (props.show ? "show" : "")}>
            <TopBar title={"分类"} back={props.hidecate} />
            <div className="topblankbox"></div>
            <div className="catecontent">

                {
                    props.catelist.map((ele, index) => (
                        <React.Fragment key={index}>
                            {
                                index === 2 ? ele.cates.map((item, i) => (
                                    <div key={i} className="cateminbox" onClick={()=>props.showcatedetail("精品书籍",i)}>
                                        <div className="imgbox"></div>
                                        <div className="contentbox">
                                            <div className="catetitle">{item.name}</div>
                                            <p>{item.desc}本书籍</p>
                                        </div>
                                    </div>
                                )) : <></>
                            }
                        </React.Fragment>
                    ))
                }
            </div>
            <div className="catebig">男生小说</div>
            <div className="catecontent">
            {
                    props.catelist.map((ele, index) => (
                        <React.Fragment key={index}>
                            {
                                index === 0 ? ele.cates.map((item, i) => (
                                    <div key={i} className="cateminbox" onClick={()=>props.showcatedetail("男生小说",i)}>
                                        <div className="imgbox"></div>
                                        <div className="contentbox">
                                            <div className="catetitle">{item.name}</div>
                                            <p>{item.desc}本书籍</p>
                                        </div>
                                    </div>
                                )) : <></>
                            }
                        </React.Fragment>
                    ))
                }
            </div>
            <div className="catebig">女生小说</div>
            <div className="catecontent">
            {
                    props.catelist.map((ele, index) => (
                        <React.Fragment key={index}>
                            {
                                index === 1 ? ele.cates.map((item, i) => (
                                    <div key={i} className="cateminbox" onClick={()=>props.showcatedetail("女生小说",i)}>
                                        <div className="imgbox"></div>
                                        <div className="contentbox">
                                            <div className="catetitle">{item.name}</div>
                                            <p>{item.desc}本书籍</p>
                                        </div>
                                    </div>
                                )) : <></>
                            }
                        </React.Fragment>
                    ))
                }
            </div>


        </div>
    );
}
